<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <main class="main">
            <div class="login-top f20">密码登录</div>
            <div class="login-phone">
                <a href="#" class="f28">手机号登录/注册</a>
                <p class="f16 text">快速找到好友, 一站式记录你的运动</p>
            </div>
            <section class="login-input fw df jccenter flex">
                <input class="phone f16" type="text" placeholder="请输入手机号" />
                <div class="df login-code">
                    <input id="login-code" type="text" placeholder="请输入验证码" />
                    <p class="code">
                        <canvas id="captcha1" class="ml12" width="120" height="40"></canvas>
                    </p>
                </div>
                <input type="password" class="pwd" placeholder="请输入密码" />
                <input type="password" placeholder="再次确认密码" class="okPwd" />
                <button id="loginBtn">注册账号</button>
            </section>
            <section class="login-wexin df">
                <span class="iconfont icon-weixin f28"></span>

                <a href="#" class="f14">微信注册</a>
            </section>
        </main>
        <footer class="login-footer  res">
            <p class="p abs">-HOLD ON-</p>
        </footer>
    </body>

</html>